<!--
 * @Description: 设置组件-获取摄像头列表
 * @Date: 2024-09-29 17:19:28
 * @FilePath: \demod:\12electron\b站向军课程\electron-camera\src\renderer\src\components\Setting.vue
-->
<template>
  <main class="w-screen h-screen bg-[#2c3e50] p-5 py-10 overflow-y-auto overflow-x-hidden">
    <el-form ref="form" lable-width="100px" :inline="false" size="large">
      <h2 class="text-gray-50 text-center mb-5 opacity-80">参数设置</h2>
      <el-form-item>
        <el-select v-model="config.deviceId" placeholder="选择摄像头" clearable filterable>
          <el-option
            v-for="item in cameras"
            :key="item.deviceId"
            :label="item.label"
            :value="item.deviceId"
            size="large"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="config.shape" placeholder="摄像头形状" clearable>
          <el-option label="圆形" value="circle" size="large"></el-option>
          <el-option label="方形" value="rect" size="large"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input v-model="config.borderWidth" size="large" placeholder="边框" clearable />
      </el-form-item>

      <el-form-item>
        <el-input v-model="config.borderColor" size="large" placeholder="颜色" clearable />
      </el-form-item>

      {{ config }}
    </el-form>
  </main>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
// import useConfig from '@renderer/composables/useConfig'
// const { config, updateConfig } = useConfig()
import { useConfigStore } from '@renderer/stores/useConfigStore'
const { config } = useConfigStore()

const cameras = ref([] as MediaDeviceInfo[]) // 摄像头列表

onMounted(async () => {
  // 获取设备列表（包含声音和视频设备）
  const mediaDevices = await navigator.mediaDevices.enumerateDevices()
  cameras.value = mediaDevices.filter((device) => device.kind.includes('video'))
  // console.log('mediaDevices: ', mediaDevices)
  console.log('cameras: ', cameras.value)
})
</script>

<style lang="scss" scoped></style>
